<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性面板</title>
    <link rel="stylesheet" href="../../../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../../../admin/css/reset.css"/>
</head>
<body>

<div class="layui-tab layui-tab-brief layui-form" lay-filter="panel-form" id="panel-form">
    <ul class="layui-tab-title" id="tabTitle"></ul>
    <div class="layui-tab-content" id="tabContent"></div>
</div>

<!--layui依赖-->
<script src="../../../../../component/layui/layui.js"></script>
<script src="../../../../../component/pear/pear.js"></script>
<script src="../../../../../lms/base64.js"></script>
<script src="../../../../../lms/common.js"></script>
<script src="../../../../../lms/permission.js"></script>
<script src="../../../../../lms/config.js"></script>

<script>
    const BASIC_URL = './template/basic.html'
    const DECIMAL_URL = './template/decimal.html'
    const TASK_URL = './template/task.html'
    const CUSTOM_URL = './template/custom.html'
    const PROCESS_URL = './template/process.html'
    const SUB_PROCESS_URL = './template/subProcess.html'
    const WF_SUB_PROCESS_URL = './template/wfSubProcess.html'
    const TRANSITION_URL = './template/transition.html'

    window.child = function (obj) {
        layui.use(['element', 'jquery', 'form'], function () {
            let element = layui.element;
            let $ = layui.jquery;
            let form = layui.form
            let newObj = initializationData(obj)


            //选项卡场景处理
            switch (extractValueAfterDelimiter(newObj.type, ':')) {
                case 'start':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(BASIC_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break
                case 'task':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(BASIC_URL),
                        id: 1
                    });
                    element.tabAdd('panel-form', {
                        title: '流程设置',
                        content: htmlFile(TASK_URL),
                        id: 2
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'custom':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(BASIC_URL),
                        id: 1
                    });
                    element.tabAdd('panel-form', {
                        title: '自定义设置',
                        content: htmlFile(CUSTOM_URL),
                        id: 2
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'decision':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(DECIMAL_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'end':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(BASIC_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'transition':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(TRANSITION_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'process':
                    element.tabAdd('panel-form', {
                        title: '流程属性',
                        content: htmlFile(PROCESS_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'subProcess':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(SUB_PROCESS_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
                case 'wfSubProcess':
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(WF_SUB_PROCESS_URL),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
                default:
                    element.tabAdd('panel-form', {
                        title: '节点属性',
                        content: htmlFile(''),
                        id: 1
                    });
                    element.tabChange('panel-form', 1)
                    break;
            }

            /**
             * 获取Html模板
             * @param url
             * @returns {*}
             */
            function htmlFile(url) {
                let html;
                $.ajax({
                    url: url,
                    dataType: 'html',
                    async: false,
                    success: function (data) {
                        html = data;
                    }
                }).responseText;
                return html;
            }


            /**
             * 表单字段过滤
             * @returns {{}}
             */
            window.propertyKeysSet = function () {
                let forms = form.val('panel-form');
                console.log(forms)
                let data = {};
                $.each(forms, function (i, j) {
                    let keys = propertyKeys()
                    if (in_array(i, keys[extractValueAfterDelimiter(forms.type, ':')])) {
                        data[i] = j;
                    }
                })
                console.log(data)
                //调用父级方法
                window.parent.handlePropertyChange(data)
            }


            /**
             * 表单属性对应keys
             * @returns {{process: string[], fork: string[], task: string[], custom: string[], start: string[], end: string[], join: string[], decimal: string[], transition: string[]}}
             */
            function propertyKeys() {
                // 表单属性keys
                return {
                    //流程属性
                    process: ['type', 'name', 'display_name', 'expire_time', 'instance_url', 'instance_no_class'],
                    //任务节点属性
                    task: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'back_permission', 'preInterceptors', 'postInterceptors', 'form', 'scope', 'assignee', 'assignment_handler', 'task_type', 'perform_type', 'reminder_time', 'reminder_repeat', 'expire_time', 'auto_execute', 'callback'],
                    //决策点属性
                    decision: ['id', 'type', 'handle_class', 'pre_interceptors', 'post_interceptors', 'expr'],
                    //开始节点属性
                    start: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors'],
                    //结束节点属性
                    end: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors'],
                    //自定义节点属性
                    custom: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors', 'clazz', 'method_name', 'args', 'pre_interceptors', 'post_interceptors'],
                    //分支节点属性
                    fork: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors'],
                    //合并节点属性
                    join: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors'],
                    //边线属性
                    transition: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors', 'expr'],
                    subProcess: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'pre_interceptors', 'post_interceptors', 'name', 'display_name', 'expire_time', 'instance_url', 'instance_no_class'],
                    wfSubProcess: ['id', 'display_name', 'type', 'width', 'height', 'theme', 'stroke', 'color', 'stroke_width', 'form', 'process_name', 'version'],
                }
            }

            /**
             * 数组in
             * @param search
             * @param array
             * @returns {boolean}
             */
            function in_array(search, array) {
                for (let i in array) {
                    if (array[i] == search) {
                        return true;
                    }
                }
                return false;
            }

            /**
             * 替换key
             * @param obj
             * @param oldKey
             * @param newKey
             * @returns {*}
             */
            function renameKey(obj, oldKey, newKey) {
                $.each(obj, function (key, value) {
                    if (key === oldKey) {
                        delete obj[key];
                        obj[newKey] = value;
                    }
                });
                return obj;
            }

            /**
             * 监听input change事件
             */
            $(function () {
                $("#panel-form input").off("change").change(function () {
                    propertyKeysSet()
                })
            })

            /**
             * 初始化对象对应的表单数据
             * @param obj
             * @returns {*|{}}
             */
            function initializationData(obj) {
                let newObj = $.extend({}, obj.data, obj.data.properties, obj.data.text != undefined ? obj.data.text : {});
                newObj.display_name = newObj.display_name != undefined ? newObj.display_name : newObj.value != undefined ? newObj.value : '';
                return newObj != undefined ? newObj : {};
            }

            /**
             * 对传入类型进行截取
             * @param string
             * @param delimiter
             * @returns {*}
             */
            function extractValueAfterDelimiter(string, delimiter) {
                // 找到冒号在字符串中的位置
                let delimiterIndex = string.indexOf(delimiter);
                // 如果冒号存在于字符串中，则截取冒号后面的值
                if (delimiterIndex !== -1) {
                    let value = string.slice(delimiterIndex + delimiter.length);
                    return value;
                } else {
                    return string;
                }
            }

            /**
             * 表单数据对外
             * @returns {*|{}}
             */
            window.independentProcessing = function () {
                return newObj
            }

            //渲染单据
            form.val('panel-form', newObj)

            form.render();
        });
    }


</script>

</body>
</html>
